<template>
  <div v-loading="remarkLoading" class="remarkDetail">
    <ContentWrap>
      <div class="remarkTitle">
        <span class="title">买家备注</span>
      </div>
      <div class="table-list-box">
        <el-table
          border
          height="90"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="remarkBuyerList"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="50" align="center" />
          <el-table-column prop="creationTime" label="时间" width="140" align="center" />
          <el-table-column prop="creator" label="备注人" width="220" align="center" />
          <el-table-column prop="ramarkName" label="备注类型" width="150" align="center" />
          <el-table-column prop="commentInfo" label="备注内容" :show-overflow-tooltip="true" align="center" />
        </el-table>
      </div>
      <div class="remarkTitle">
        <span class="title">卖家备注</span>
      </div>
      <div class="table-list-box">
        <el-table
          border
          height="90"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="remarkSellerList"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="50" align="center" />
          <el-table-column prop="creationTime" label="时间" width="140" align="center" />
          <el-table-column prop="creator" label="备注人" width="220" align="center" />
          <el-table-column prop="ramarkName" label="备注类型" width="150" align="center" />
          <el-table-column prop="commentInfo" label="备注内容" :show-overflow-tooltip="true" align="center" />
        </el-table>
      </div>
      <div class="remarkTitle">
        <span class="title">订单备注</span>
      </div>
      <div class="table-list-box">
        <el-table
          border
          height="90"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="remarkOrderList"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="50" align="center" />
          <el-table-column prop="creationTime" label="时间" width="140" align="center" />
          <el-table-column prop="creator" label="备注人" width="220" align="center" />
          <el-table-column prop="ramarkName" label="备注类型" width="150" align="center" />
          <el-table-column prop="commentInfo" label="备注内容" :show-overflow-tooltip="true" align="center" />
        </el-table>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import { parseTime } from '@/utils'
import { getDictByType } from '@/api/dataDict'
export default {
  components: {
    ContentWrap
  },
  props: {
    orderRemark: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      remarkLoading: true,
      commentCategoryOption: [],
      remarkBuyerList: [],
      remarkSellerList: [],
      remarkOrderList: []
    }
  },
  created() {
    this.getDataDict({ type: 'commentCategory', ditctType: 'COMMENTTYPES' })
  },
  methods: {
    indexMethod(index) {
      return index + 1
    },
    // 获取数据字典
    getDataDict({ type, ditctType }) {
      const dictTypeCode = ditctType
      const appCode = 'call-center'
      const domainCode = 'marketing'
      const parmas = {
        dictTypeCode,
        appCode,
        domainCode
      }
      getDictByType(parmas).then(res => {
        if (type === 'commentCategory') {
          this.commentCategoryOption = res.data || []
          this.$nextTick(() => {
            this.formatOrderRemark()
          })
        }
      })
    },
    findCategoryName(dictCode) {
      if (dictCode === '') return '--'
      const obj = this.commentCategoryOption.find(item => {
        return item.dictCode === dictCode
      })
      if (typeof obj === 'object' && Object.keys(obj).length) {
        return obj.dictName
      }
      return '--'
    },
    formatOrderRemark() {
      if (Array.isArray(this.orderRemark) && this.orderRemark.length) {
        const list = [...this.orderRemark]
        // 0，买家备注，1卖家备注，2订单备注
        const remarkBuyerList = []
        const remarkSellerList = []
        const remarkOrderList = []
        list.forEach(item => {
          item.creationTime = parseTime(item.creationTime)
          item.ramarkName = this.findCategoryName(item.commentCategory)
          this.$nextTick(() => {
            if (Number(item.commentCategory) === 0) remarkBuyerList.push(item)
            if (Number(item.commentCategory) === 1) remarkSellerList.push(item)
            if (Number(item.commentCategory) === 2) remarkOrderList.push(item)
          })
        })
        this.remarkBuyerList = remarkBuyerList
        this.remarkSellerList = remarkSellerList
        this.remarkOrderList = remarkOrderList
        this.$nextTick(() => {
          this.remarkLoading = false
        })
      } else {
        this.remarkLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.remarkDetail {
  .remarkTitle {
    margin-top: 15px;
    padding-bottom: 5px;
    .title {
      font-size: 14px;
      font-weight: 700;
      // color: #16BC83;
      color: #444444;
    }
  }
}
</style>
